<template>
  <div id="bar">
    <div class="bar" ref="bar"></div>
  </div>
</template>

<script>
export default {
  props: {
    x_data: Array | Object,
    y_data: Array | Object,
    formatter: String | Number
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawbar();
  },

  methods: {
    drawbar() {
      let that = this;
      let my_chart = that.$echarts.init(that.$refs.bar);
      let option = {
        color: '#F4B477',
        tooltip: {
          formatter: function (data) {
            let tr = '';

            data.forEach(element => {
              tr += `<tr  style="border:none !important">
                  <td style="padding-right:10px">数值</td>
                  <td>${that.formatter == 1 ? element.value * 100 + '%' : element.value + '%'}</td>
                  </tr>`;
            });
            let str = `<p>${data[0].axisValue}</p><table style="border:none !important"><tbody>${tr}</tbody></table>`;
            return str;
          },
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            // return [point[0], '10%']
          },
          axisPointer: {
            type: 'line'
          },
          backgroundColor: '#fff',
          extraCssText:
            'box-shadow: 0px 0px 4px 0px  rgba(0, 0, 0, 0.18);line-height:25px;padding:10px 15px',
          textStyle: {
            color: '#222222',
            fontSize: 14,
            align: 'left'
          },

          trigger: 'axis'
        },

        grid: {
          top: '13%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: that.x_data,
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#888'
            }
          }
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#888'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          },
          axisLabel: {
            formatter: function (value) {
              if (that.formatter == 1) {
                return value * 100 + '%';
              } else if (that.formatter == 2) {
                return value + '%';
              }
            }
          }
        },
        series: [
          {
            data: that.y_data,
            type: 'bar',
            barWidth: 20, //柱状宽度
            itemStyle: {
              emphasis: {
                barBorderRadius: [3, 3, 0, 0]
              },
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 12
                  },
                  formatter: function (value) {
                    if (that.formatter == 1) {
                      return value.value * 100 + '%';
                    } else if (that.formatter == 2) {
                      return value.value + '%';
                    }
                  }
                }
              }
            },

            showBackground: false,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      };
      my_chart.setOption(option);
      my_chart.setOption({
        graphic: {
          type: 'image',
          bounding: 'raw',
          top: '60%',
          left: '15%'
          // style: {
          //   image:
          //     "",
          //   width: "147",
          //   height: "32",
          // },
        }
      });
      let resizeFn = function () {
        my_chart.resize();
      };
      window.addEventListener('resize', resizeFn);
      this.$once('hook:beforeDestroy', () => {
        my_chart.dispose();
        my_chart = null;
        window.removeEventListener('resize', resizeFn);
      });
    }
  }
};
</script>
<style lang='less' scoped>
#bar {
  .bar {
    width: 100%;
    height: 100%;
  }
}
</style>